<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="筛选" isBack></navbar>

		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="item-box">
				<view class="item" v-for="(item,index) in optionsMap" :key="item.label">
					<view class="item-title">
						{{item.label}}
					</view>
					<view class="item-list" v-if="item.label!='日薪'">
						<view class="item-label" v-for="(row,indexs) in item.list" :key="row.id">
							<view :class="{'active':filters[item.type]==row.sort}" @click="tabClick(item,indexs)">
								{{row.sort}}
							</view>
						</view>
					</view>
					<view class="item-value" v-else @click="salaryOpen">
						 <view class="item-value-view">{{filters.salary || "请选择"}}</view>
						 <view class="item-value-icon">
						 	<van-icon name="arrow-down" color="#999" />
						 </view>
					</view>
				</view>
				<!-- <view class="item">
					<view class="item-title">
						城市
					</view>
					<view class="item-value" @click="cityOpen">
						 <view class="item-value-view">{{filters.city || "请选择"}}</view>
						 <view class="item-value-icon">
						 	<van-icon name="arrow-down" color="#999" />
						 </view>
					</view>
				</view> -->
			</view>
		</view>

		<view class="main-bj">
		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-cancel" @click="reset">
				重置
			</view>
			<view class="main-button-confirm" @click="showChange">
				确认
			</view>
		</view>
		
		<!-- 地址Select -->
		<van-popup position="bottom" :show="areaShowPicker">
			<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel" :columns-num="2" />
		</van-popup>
		
		<picker-view ref="salaryRef" :list="optionsMap.salaryList.list" @confirm="onConfirm"></picker-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		areaList
	} from '@/node_k/area-data/areadata.js';
	import Navbar from '@/components/Navbar.vue'
	import {getData} from "@/core/web-api/common.js"
	import PickerView from '@/components/PickerView.vue';
	export default {
		data() {
			return {
				areaList: areaList,
				areaShowPicker: false,
				active:0,
				bottomBtnHeight: uni.upx2px(100),
				optionsMap:{
					eduList:{
						label:"学历",
						list:[],
						type:"education"
					},
					expList:{
						label:"工作经验",
						list:[],
						type:"workExperience"
					},
					timeList:{
						label:"工作时间",
						list:[],
						type:"workTime"
					},
					typeList:{
						label:"工作形式",
						list:[],
						type:"workType"
					},
					salaryList:{
						label:"日薪",
						list:[],
						type:"salary"
					},
				},
				filters:{
					city: "",	// 城市
					education: "", //学历			
					province: "", //省份			
					workExperience: "", //工作经验			
					workTime: "", //工作时间			
					workType: "",// 工作形式
					salary:"",
				}
			}
		},
		components: {
			Navbar,
			PickerView
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['imgUrl','indexFilters'])
		},
		methods: {
			/**
			 * 地址显示
			 */
			cityOpen(){
				this.areaShowPicker = true;
			},
			/**
			 * 关闭
			 */
			onCelcel(){
				this.areaShowPicker = false;
			},
			/**
			 * 选择地址
			 */
			selectQydz({
				values
			}) {
				this.filters.city = values
					.filter((item) => !!item)
					.map((item) => item.name)
					.join('/');
				this.areaShowPicker = false;
			},
			/**
			 * 确认
			 */
			showChange(){
				let flag = false;
				for(let key in this.filters){
					if(this.filters[key]){
						flag = true;
					}
				}
				this.$store.commit("setFilters",this.filters);
				uni.navigateBack()
			},
			/**
			 * 重置
			 */
			reset(){
				this.filters = {
					city: "",	// 城市
					education: "", //学历			
					province: "", //省份			
					workExperience: "", //工作经验			
					workTime: "", //工作时间			
					workType: "",// 工作形式
					salary:"",
				}
			},
			/**
			 * 打开弹窗
			 */
			salaryOpen(){
				this.$refs.salaryRef.open();
			},
			/**
			 * 确认
			 * @param {Object} value
			 */
			onConfirm(value){
				this.filters.salary = this.$refs.salaryRef.value;
			},
			/**
			 * 选择标签页
			 */
			tabClick(type,index){
				this.filters[this.optionsMap[type].type] = this.optionsMap[type].list[index].sort
			},
			
			/**
			 * 加载数据
			 */
			getCataList(){
				let nameList = ['学历','工作经验','工作时间','工作方式','岗位薪资'];
				let cataList = ['eduList','expList','timeList','typeList','salaryList']
				getData({
					sortList:nameList
				}).then(res=>{
					if(res.code==20000){
						let list = res.data.list;
						list.forEach(item=>{
							let index = nameList.findIndex(f=>f==item.sort);
							this.optionsMap[cataList[index]].list = item.list;
						})
					}
				})
			}
		},
		watch:{
			indexFilters:{
				deep:true,
				immediate:true,
				handler(obj){
					if(obj && Object.keys(obj).length>0){
						for(let key in obj){
							this.filters[key] = obj[key]
						}
					}
				}
			}
		},
		created() {
			this.getCataList()
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding: 10upx 30upx 0 30upx;
			text-align: center;
			font-size: 30upx;
			display: flex;
			view{
				height: 75upx;
				line-height: 75upx;
				border-radius: 10upx;
			}

			&-cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 148upx;
				color: #666666;
				background-color: #fff;
				margin-right: 10upx;
			}

			&-confirm {
				width: 533upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}

	.item {
		margin-bottom: 30upx;
		border-radius: 10upx;
		background-color: #fff;
		padding: 30upx 0upx;
		box-sizing: border-box;
		
		&-value{
			width: 100%;
			padding:0 20upx;
			box-sizing: border-box;
			margin-top: 20upx;
			position: relative;
			&-view{
				width: 100%;
				height: 60upx;
				background-color: #f6f7f9;
				font-size: 26upx;
				line-height: 60upx;
				padding:0 20upx;
				box-sizing: border-box;
				color: #666;
			}
			&-icon{
				position: absolute;
				right: 40upx;
				top: 50%;
				margin-top: -20upx;
			}
		}
		
		&-box{
			margin-top: 30upx;
		}

		&-title {
			font-size: 34upx;
			color: #000000;
			font-weight: bold;
			padding:0 20upx;
			box-sizing: border-box;
		}

		&-list {
			display: flex;
			flex-wrap: wrap;
			width: 696upx;
			padding-top: 10upx;
			margin-left: -35upx;
		}

		&-label {
			display: flex;
			box-sizing: border-box;
			width: 177upx;
			margin-left: 55upx;
			view {
				width: 100%;
				height: 60upx;
				border-radius: 6upx;
				background-color: #f6f7f9;
				font-size: 26upx;
				color: #333333;
				text-align: center;
				line-height: 60upx;
				margin: 15upx 0;
				&.active{
					background: linear-gradient(to top,#6fabfd,#5371fd);
					color: #fff;
				}
			}
		}
	}
</style>